<template>
	<view>
		<text class="title">我的</text>
		<view class="headers">
			<view class="l">
				<image v-if="userInfo" :src="userInfo.avatarUrl" mode=""></image>
				<image v-else src="/static/images/zu428.png"></image>
			</view>
			<view class="r">
				<text v-if="userInfo">{{userInfo.nickName}}</text>
				<template v-else>
					<text @tap="login">立即登录</text>
					<text class="r2">登录后可收藏喜欢的菜谱</text>

				</template>



			</view>
		</view>
		<view class="cards">
			<image src="/static/images/mengbanzu87.png" mode=""></image>
			<text v-if="!Isvip" @tap="openVip">升级为VIP</text>
			<text v-else>会员时间至：{{userInfo.vipdate}}</text>
		</view>
		<view class="three">
			<view>
				<view class="one">
					<image src="/static/images/收藏.png" mode=""></image>
					<text>我的收藏</text>
				</view>
				<view class="one">
					<image src="/static/images/mengbanzu281.png" mode=""></image>
					<text>浏览记录</text>
				</view>
				<view class="one">
					<image src="/static/images/mengbanzu282.png" mode=""></image>
					<text>点赞</text>
				</view>

			</view>
		</view>
		<u-tabs :list="titleList" @click="click" lineHeight=0 :activeStyle="{
						color: '#ee7b2d',
						fontWeight: 'bold',
						transform: 'scale(1.05)'
					}" :inactiveStyle="{
						color: '#898989',
						transform: 'scale(1)'
					}">
		</u-tabs>

		<u-read-more :toggle="true" ref="uReadMore" showHeight="300rpx" color="black" closeText="展开全部">
			<rich-text>
				<view class="allG" v-for="item in currentData.ingredient" :key="item.name">
					<text class="left">{{item.name}}</text>
					<text>{{item.number}}</text>
				</view>
			</rich-text>

		</u-read-more>
		<view class="spacing"></view>
		<view class="footer-shou">
			<text class="header">我的菜谱</text>
			<scroll-view scroll-x enable-flex style="white-space: nowrap;">
				<view class="itemOne" v-for="item in mycollectData" :key="item._id">
					<image :src="item.coverpic" @tap="getDetail(item._id)"></image>
					<view>{{item.name}}</view>
				</view>
			</scroll-view>
		</view>
		<view class="spacing"></view>
		<view class="score">
			<image src="/static/images/mengbanzu282.png" mode=""></image>
			<view>
				<text>去APP Store给菜谱大全评分</text>
				<u-icon name="arrow-right" color="#9b969f" size="25"></u-icon>
			</view>
		</view>
		<view class="score">
			<image src="/static/images/mengbanzu273.png" mode=""></image>
			<view style="border:none;">
				<text>反馈问题</text>
				<u-icon name="arrow-right" color="#9b969f" size="25"></u-icon>
			</view>
		</view>
		<view class="spacing"></view>
		<button v-if="userInfo" type="default" @tap="leave">退出登录</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: null,
				currentIndex: 0,
				currentData: [],
				mycollectData: [],
				titleList: []


			}
		},
		computed:{
			Isvip(){
					return getApp().globalData.userInfo.vip
			}
		},
		onLoad() {
			//解决展开组件的异步问题
			setTimeout(() => {
						this.getCollction()
						this.$nextTick(() => {
							this.$refs.uReadMore.init();
						})
					}, 1000);
			
		},
		onShow() {
			this.getCollction()
			this.userInfo = getApp().globalData.userInfo;
			
		},
		methods: {
			getDetail(id){
				console.log(id);
				uni.navigateTo({
					url:"../datail/datail?_id="+id
				})
			},
			//点击退出登录
			leave() {
				getApp().globalData.userInfo = null
				uni.removeStorage({
					key: "user_token",
					success() {
						uni.showToast({
							title: '退出成功',
							duration: 1000,

						});
						uni.reLaunch({
							url:'/pages/mine/mine'
						})

					}
				})
			},
			click(one) {
				this.currentData = this.mycollectData[one.index]
			},
			openVip() {
				const token = wx.getStorageSync("user_token")
				if (token) {
					uni.navigateTo({
						url: "../openVip/openVip"
					})
				} else {
					uni.showModal({
						content: '请先登录',
						showCancel: false
					});
					console.log(this.token);
				}
			},
			async getCollction() {
				const _id = getApp().globalData.userInfo._id
				const token = wx.getStorageSync("user_token")
				const data = await this.$api.mine.getCollction({
					_id: _id
				}, {
					token: token
				})
				this.mycollectData = data.mycollect
				this.currentData = data.mycollect[0]
				//先将本地清空，重新加入收藏数据
				this.titleList = []
				data.mycollect.forEach(item => {

					this.titleList.push({
						name: item.name
					})
				})
				console.log("刷新",this.currentData);
			},
			// 获取用户信息
			login() {
				wx.getUserProfile({
					desc: "用于获取用户信息",
					success: (result) => {
						getApp().globalData.userInfo = result.userInfo
						this.getCode()
					}
				})
			},
			// 获取code
			getCode() {
				wx.login({
					success: (res) => {
						console.log('获取code成功');
						this.getTokens({
							code: res.code,
							appId: "wxebf08367931e3790",
							appSecret: "bec6d1f0fbf1aeb16388436d5794e4e5"
						})
					}
				})
			},
			async getTokens(params) {
				const data = await this.$api.mine.getToken(params)
				if (data.token) {
					console.log("获取token成功");
					wx.setStorage({
						key: 'user_token',
						data: data.token
					})
					// //上传用户数据
					uni.request({
						url: "http://web.woniulab.com:8005/user/auth",
						method: "post",
						data: {
							token: data.token,
							...getApp().globalData.userInfo
						},
						header: {
							Authorization: data.token
						},
						success: async (res) => {
							console.log("上传用户信息", res)
							// 获取更新的用户信息
							const token = wx.getStorageSync("user_token")
							const data = await this.$api.mine.getUserInfo({
								token: token
							})

							if (data[0]._id) {
								getApp().globalData.userInfo = data[0]
								this.userInfo = getApp().globalData.userInfo
								this.getCollction()
								//重新刷新页面
								uni.reLaunch({
									url:"/pages/mine/mine"
								})
								console.log("更新后的用户数据", this.userInfo);

							}

						}
					})



				}
			}

		}
	}
</script>

<style scoped lang="scss">
	.title {
		display: block;
		text-align: center;
		width: 100rpx;
		margin: 60rpx auto;
		font-size: 35rpx;
		font-weight: bold;
	}

	.headers {
		width: 680rpx;
		height: 150rpx;
		box-sizing: border-box;
		margin: 0 auto;
		display: flex;

		.l {
			width: 150rpx;
			height: 100%;

			image {
				width: 100%;
				height: 140rpx;
				border-radius: 50rpx;
			}
		}

		.r {
			width: 400rpx;
			margin-bottom: 10rpx;
			margin-top: 25rpx;
			color: rgb(137, 137, 137);
			font-family: 26rpx;
			font-weight: bolder;
			margin-left: 30rpx;
		}

		.r2 {
			font-size: 30rpx;
			font-weight: bold;
			color: #e7e7e7;
			display: block;
			margin-top: 10rpx;
		}
	}

	.cards {
		width: 680rpx;
		height: 130rpx;
		margin: 40rpx auto 0;
		position: relative;

		image {
			width: 100%;
			height: 100%;
			position: absolute;
			z-index: -3;
		}

		>text {
			font-size: 35rpx;
			left: 120rpx;
			top: 30rpx;
			position: absolute;
			font-size: 32rpx;
			color: #b4853f;


		}
	}

	.three {
		height: 230rpx;
		background-color: #f5f5f5;
		overflow: hidden;

		>view {
			height: 160rpx;
			background-color: white;
			margin-top: 30rpx;
			display: flex;
			justify-content: space-around;
			text-align: center;

			.one {
				width: 200rpx;
				margin-top: 20rpx;
				image {
					width: 60rpx;
					height: 60rpx;
				}

				text {
					display: block;
					font-size: 29rpx;
				}
			}

		}
	}

	.allG {
		margin: 20rpx auto 20rpx;
		display: flex;
		border-bottom: 1rpx solid #dbdbdb;

		.left {
			display: block;
			width: 400rpx;
		}

	}

	.spacing {
		height: 30rpx;
		background-color: #f5f5f5;
	}

	.footer-shou {
		width: 680rpx;
		margin: 0 auto;
		box-sizing: border-box;
		padding: 20rpx;
	}

	scroll-view {
		display: flex;
		justify-content: space-between;
		height: 460rpx;

	}

	.itemOne {
		width: 400rpx;
		height: 400rpx;
		margin-right: 50rpx;
		margin-top: 20rpx;
		text-align: center;

		image {
			height: 350rpx;
			width: 300rpx;
			border-radius: 25rpx;
		}

		view {
			color: #808080;
			font-size: 28rpx;
		}
	}

	.score {
		height: 100rpx;
		width: 730rpx;
		margin-left: 20rpx;
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;

		image {
			width: 50rpx;
			height: 50rpx;
			margin-right: 20rpx;

		}

		view {
			height: 100rpx;
			width: 660rpx;
			display: flex;
			border-bottom: 1rpx solid #dbdbdb;
			align-items: center;
			justify-content: space-between;
		}

	}
</style>
